<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<form id="app">
    <label>ID:</label>
    <input type="text" id="ID" v-model ="book.ID">

    <div>
        <input type = "button" value="删除" id="delete" @click = "deleteBook(book.ID)">
        <input type="reset" value="重置">
    </div>
</form>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<script>
    const app = Vue.createApp({
        data(){
            return{
                book:{
                    ID:''
                }

            }
        },
        methods: {
            deleteBook(ID) {
                if(!ID){
                    alert("请输入书籍编号。");
                    return;
                }

                axios({
                    method:'delete',
                    url:'/dem1/book/'+ID,
                }).then(response => {
                    let obj = response.data;
                    console.log("后端响应", obj);

                    if (obj.success) { // 判断 success 字段
                        alert(obj.message);
                        location.href = "/dem1/test/bookList.html";
                    } else {
                        alert(obj.message || "删除失败");
                    }
                })
            },
            resetForm(){
                this.book ={ID:''};
            }
        }
    })
    app.mount("#app")

</script>

</html>
